<template>
    <div
        class="largeprepayqry-contnair"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <!-- 油心分专项分期提前还款 -->
        <!-- <el-card
      shadow="never"
      v-loading="isLoading"
      element-loading-background="rgba(250, 250, 250, 0.7)"
    >
      <div slot="headerss" class="clearfix">
        <span>油心分专项分期提前还款</span>
        <el-button style="float: right; padding: 3px 20px;" type="text">关 闭</el-button>
        </div>-->
        <cardComponent pageTitle="油心分专项分期提前还款">
            <template slot="cardBody">
                <el-form
                    ref="LargepreFormRef"
                    :rules="LargepreFormRules"
                    :model="LargepreForm"
                    label-width="100px"
                    size="small"
                >
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="主卡卡号 : ">
                                <el-input
                                    disabled
                                    v-model="LargepreForm.CARDNBR"
                                    style="width: 100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起始日期 : " prop="BEGDAY">
                                <dataTime
                                    start
                                    @startT="startT"
                                    :endDates="LargepreForm.ENDDAY"
                                    :a="LargepreForm.BEGDAY"
                                ></dataTime>
                                <!-- <el-input
                  maxlength="8"
                  v-model="LargepreForm.BEGDAY"
                  style="width: 100%;"
                  placeholder="格式 : YYYYMMDD"
                                ></el-input>-->
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束日期 : " prop="ENDDAY">
                                <dataTime
                                    end
                                    @endT="endT"
                                    :startDates="LargepreForm.BEGDAY"
                                    :b="LargepreForm.ENDDAY"
                                ></dataTime>
                                <!-- <el-input
                  maxlength="8"
                  v-model="LargepreForm.ENDDAY"
                  style="width: 100%;"
                  placeholder="格式 : YYYYMMDD"
                                ></el-input>-->
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item size="small" label-width="15px">
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="onTrial('LargepreFormRef')"
                                >查 询</el-button>
                                <el-button type="primary" size="small" @click="onReset">重 置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- </el-card> -->

                <!-- 油心分专项分期提前还款详情 -->
                <el-card
                    shadow="never"
                    v-loading="isLoading"
                    element-loading-background="rgba(250, 250, 250, 0.7)"
                    v-if="showTrial"
                >
                    <div slot="headerss" class="clearfix">
                        <span>油心分专项分期提前还款查询详情</span>
                        <el-button
                            style="float: right; padding: 3px 20px;"
                            type="text"
                            @click="showTrial = false"
                        >关 闭</el-button>
                    </div>
                    <div>
                        <el-table
                            :data="tableData"
                            border
                            stripe
                            style="width: 1540px;"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            class="heard-bg business_table"
                        >
                            <el-table-column width="36">
                                <template slot-scope="scope">
                                    <el-radio v-model="id" :label="scope.row.MPNO">{{""}}</el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column prop="BEGYM_1" label="分期付款交易日期" width="133"></el-table-column>
                            <el-table-column prop="STATUS_1" label="状态" width="77"></el-table-column>
                            <el-table-column prop="MPMTHS" label="分期期数" width="100"></el-table-column>
                            <el-table-column prop="MPINSTAL" label="月还款额" width="100"></el-table-column>
                            <el-table-column prop="LASTBPL" label="上月已摊消本金" width="120"></el-table-column>
                            <el-table-column prop="LASTFEE" label="上月已摊消费用" width="120"></el-table-column>
                            <el-table-column prop="INSTCNT" label="已摊消次数" width="92"></el-table-column>
                            <el-table-column prop="PAYAMT" label="已摊消金额" width="100"></el-table-column>
                            <el-table-column prop="PPLMTHS" label="剩余期数" width="85"></el-table-column>
                            <el-table-column prop="REMFEE" label="剩余未摊消金额"></el-table-column>
                        </el-table>
                        <div class="footer">
                            <el-button type="primary" size="small" @click="onChoiceTrial">提前还款试算</el-button>
                            <el-button type="primary" size="small" @click="onChoice">提前还款</el-button>
                            <el-button
                                :disabled="currentPageIndex <= 0"
                                type="primary"
                                size="small"
                                @click="handleChangePage('pre')"
                            >上一页</el-button>
                            <el-button
                                :disabled="nextButtonFlag"
                                type="primary"
                                size="small"
                                @click="handleChangePage('next')"
                            >下一页</el-button>
                        </div>
                    </div>
                </el-card>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import dataTime from '@/components/datePocker/TimeStartToEnd.vue';
import {
    getInstalmentList,
    getDictSelectList,
    getAccountTypeName,
} from '@/utils/Common';
import Breadcrumb from './components/breadcrumb';
import { get_3xxx, get_4xxx } from '@/apis/getAPIClass';
import { setNumber, ChangePage } from '@/utils/Object';


export default {
    name: 'largeprepayqry',
    data() {
        return {
            LargepreForm: {
                CARDNBR: '',
                BEGDAY: '',
                ENDDAY: '',
            },
            LargepreFormRules: {
                BEGDAY: [
                    {
                        required: true,
                        message: '请输入起始日期！',
                        trigger: 'blur',
                    },
                ],
                ENDDAY: [
                    {
                        required: true,
                        message: '请输入终止日期！',
                        trigger: 'blur',
                    },
                ],
            },
            id: '',
            currentRow: null,
            tableData: [
                {
                    //  MPNO: 5,
                    // BEGYM: '2016--01',
                    // STATUS: '王小虎',
                    // MPMTHS: ' 1519 弄',
                    // MPINSTAL: '2016--01',
                    // LASTBPL: '王小虎',
                    // LASTFEE: ' 1519 弄',
                    // INSTCNT: '2016--01',
                    // PAYAMT: '王小虎',
                    // PPLMTHS: ' 1519 弄',
                    // PPLAMT: '2016--01'
                },
            ],
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页,
            nextButtonFlag: true, // 下翻页按钮 显示控制阀
            MPNO: '0', // 翻页分期付款序号首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            RTNIND: '', // 首次查询上送空； 下翻页查询上送1；
            BEGYM: '00000000',
            showTrial: false,
            isLoading: false,
            isLoading: false,
        };
    },
    name: 'Largeprepayqry',
    components: {
        cardComponent,
        dataTime,
    },
    computed: {
        ...mapState({
            defaultParams: state => state.common.defaultParams, // 接口默认参数
            cardInfo_3004: state => state.common.cardInfo_3004,
        }),
    },
    mounted() {
        this.onLoadOBJ();
    },
    methods: {
        onLoadOBJ() {
            this.LargepreForm.CARDNBR = this.cardInfo_3004.CARDNO;
        },
        // 查询 3037
        async onTrial(ref) {
            this.$refs[ref].validate(async (valid) => {
                if (!valid) return this.$message.warning('验证错误，请核实填写数据！');
                this.isLoading = true;

                this.id = '';
                this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                this.MPNO = '0';
                this.RTNIND = '';
                this.BEGYM = '00000000';
                this.get_3077();
                // this.showTrial = true;
            });
        },
        // 提前还款试算 4073
        async onChoiceTrial() {
            this.isLoading = true;
            if (this.currentRow === null) {
                this.isLoading = false;
                return this.$alert('请选择一条记录列表！', '油心分试算提示！', {
                    confirmButtonText: '确定',
                    center: true,
                    customClass: 'warning ',
                    showClose: false,
                });
            }
            const res = await this.get_4073(this.currentRow.MPNO, 0, 0, '', 'T');
            console.log(res);
            // 如果没有body 则 不执行后面操作
            if (!res.body) return false;
            this.$alert('油心分提前还款试算成功！', '油心分试算提示！', {
                confirmButtonText: '确定',
                center: true,
                customClass: 'success ',
                showClose: false,
            });
            this.showTrial = true;
            this.isLoading = false;
        },
        // 提前还款 4073
        async onChoice() {
            this.isLoading = true;
            if (this.currentRow === null) {
                this.isLoading = false;
                return this.$alert('请选择一条记录列表！', '油心分提前还款提示！', {
                    confirmButtonText: '确定',
                    center: true,
                    customClass: 'warning ',
                    showClose: false,
                });
            }
            const res = await this.get_4073(this.currentRow.MPNO, 0, 0, '', '');
            console.log(res);
            // 如果没有body 则 不执行后面操作
            if (!res.body) return false;
            this.$alert('油心分提前还款申请成功！', '油心分提前还款提示！', {
                confirmButtonText: '确定',
                center: true,
                customClass: 'success ',
                showClose: false,
            });
            this.showTrial = true;
            this.isLoading = false;
        },
        // 获取 4073
        async get_4073(MPNUMBER, NOFEE, NREMFEE, FEEPCT, ACTION) {
            // 设置 4073请求头
            console.log(MPNUMBER, NOFEE, NREMFEE, FEEPCT, ACTION);
            const appBody = {
                CARDNBR: this.LargepreForm.CARDNBR, // 卡号
                OPTION: 1,
                PINFLAG: 0,
                MPNUMBER: MPNUMBER || '', // 分期付款序号
                NOFEE: NOFEE || '', // 免除提前还款手续费0-不免除，1-免除
                NREMFEE: NREMFEE || '', // 免除提前还款未分摊手续费 0-不免除，1-免除
                FEEPCT: FEEPCT || '', // 提前还款未分摊手续费减免比例 “免除提前还款未分摊手续费”不为零的情况下才能填写；
                ACTION: ACTION || '', // 空：提前还款 T：提前还款试算默认为空
            };
            const resultData = await get_4xxx(
                '4073',
                '油心分专项分期',
                appBody,
                this,
            );
            // 成功之后当前显示
            this.isLoading = false;
            this.showTrial = true;
            this.$message.success('获取数据成功');
            return resultData;

            this.isLoading = false;
        },
        async get_3077() {
            const appBody_3077 = {
                CARDNBR: this.LargepreForm.CARDNBR || '', // 卡号,
                PINFLAG: 0,
                OPERCODE: '0', // 操作代码0:全部返回1：可提前还款的分期交易2：可撤销的分期交易
                MPTYPE: 'Z', // 分期付款类型
                OPT: '1', // 查询方式
                BEGDAY: this.LargepreForm.BEGDAY, // 起始日期
                ENDDAY: this.LargepreForm.ENDDAY, // 终止日期
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志
                NEXTDAY: this.BEGYM, // 首次查询时送查询起始日期，下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO: this.MPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号 选填
            };
            let bool = false;
            if (this.pagingDataList.length == 0) bool = true;

            const res_3077 = await get_3xxx(
                '3077',
                '油心分提前还款查询',
                appBody_3077,
                this,
                true,
                bool,
            );
            this.isLoading = false;
            if (!res_3077) {
                if (this.pagingDataList.length != 0) {
                    this.$message.warning('已经到最后一条数据');
                }
                this.nextButtonFlag = true;
                return false;
            }
            // 数据成功之后
            const res = res_3077.body.appBody.dataList;
            res.forEach((e) => {
                e.CARDNBR = e.CARDNBR.trim();
                e.CARDNBR_1 = e.CARDNBR.substring(e.CARDNBR.length - 4);
                if ((`${e.BEGYM}`).trim()) e.BEGYM_1 = moment(`${e.BEGYM}`).format('YYYY-MM-DD');
                if ((`${e.CURRNUM}`).trim() == 156) e.CURRNUM_1 = '人民币';
                if ((`${e.STATUS}`).trim() == 'C') e.STATUS_1 = '完成';
                if ((`${e.STATUS}`).trim() == 'E') e.STATUS_1 = '错误终止';
                if ((`${e.STATUS}`).trim() == 'F') e.STATUS_1 = '退货终止';
                if ((`${e.STATUS}`).trim() == 'N') e.STATUS_1 = '新增的';
                if ((`${e.STATUS}`).trim() == 'P') e.STATUS_1 = '提前还款';
                if ((`${e.STATUS}`).trim() == 'R') e.STATUS_1 = '重新激活';
                if ((`${e.STATUS}`).trim() == 'X') e.STATUS_1 = '暂停';
                // this.srcMapList.forEach(i => {
                //   if ((e.MPTYPE + "").trim() == i.code ) {
                //     e.MPTYP_1  = i.label
                //   }
                // })
            });
            this.tableData = [...res];
            this.showTrial = true;
            // 翻页设置
            ChangePage(this, ['BEGYM', 'MPNO'], 'tableData', 5);
        },

        handleCurrentChange(val) {
            this.currentRow = val;
            this.id = val.MPNO;
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') {
                // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    this.MPNO = '0';
                    this.RTNIND = '';
                    this.BEGYM = '00000000';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.MPNO = this.pagingDataList[this.currentPageIndex].MPNO;
                    this.BEGYM = this.pagingDataList[this.currentPageIndex].BEGYM;
                }
                this.get_3077();
            } else {
                // 切换到下一页
                this.get_3077();
            }
        },
        // 重置
        onReset() {
            this.tableData = [];
            this.LargepreForm.MPTYPE = 'Z';
            this.LargepreForm.BEGDAY = '';
            this.LargepreForm.ENDDAY = '';
            this.id = '';
            this.currentRow = null;
            this.$refs.LargepreFormRef.resetFields();
        },
        startT(data) {
            this.LargepreForm.BEGDAY = data;
        },
        endT(data) {
            this.LargepreForm.ENDDAY = data;
        },
    },
};
</script>

<style  scoped lang="scss">
.largeprepayqry-contnair {
    /deep/.el-card__header {
        padding: 8px !important;
    }
    /deep/.form-row {
        width: 100%;
        margin: 0 auto;
        .el-form {
            //   text-align: left;
            margin: 0 auto;
            //   width: 500px;
            .el-form-item {
                text-align: left;
            }
        }
        .el-select {
            width: 100%;
            margin-bottom: 15px;
        }
    }

    .el-form-item {
        text-align: left;
        // margin-bottom: 0;
    }
    .footer {
        text-align: center;
        margin-top: 8px;
    }
}
</style>
